import { Layout, Menu, Space } from 'antd';
import { Link } from 'react-router-dom';
import { 
  MessageOutlined, 
  RobotOutlined, 
} from '@ant-design/icons';

const { Header } = Layout;

const HeaderBar = () => {
  const getSelectedKey = () => {
    if (location.pathname === '/chat') return 'chat';
    if (location.pathname === '/chat-page') return 'chat-page';
    return 'chat-page';
  };
  const items = [
    {
      key: 'chat',
      label: <Link to="/chat" style={{ color: 'white', fontSize: '16px' }} >Chat</Link>,
      icon: <RobotOutlined style={{ backgroundColor: 'white' }}/>
    },
    {
      key: 'chat-page',
      label:  <Link to="/chat-page" style={{ color: 'white', fontSize: '16px' }} >Chat Page</Link>,
      icon: <MessageOutlined style={{ backgroundColor: 'white' }}/>,
    } 
  ];
  return(
  <Header style={{ 
      backgroundColor: '#42A5F5',
      display: 'flex',
      color: 'white', 
     
      fontSize: '20px', 
      alignItems: 'center'
    }}>
      <div className="logo" style={{  fontWeight: 'bold', width: '20%'}}>
        Scorpio Client
      </div>
      <div className="page-link" style={{ width: '80%', marginRight: 'auto', fontSize: '20px',  backgroundColor: 'transparent'}}>
      <Menu 
        mode="horizontal" 
        items={items}
        style={{ backgroundColor: 'transparent', color: 'white'}}
        selectedKeys={[getSelectedKey()]}
      />
    </div>
  </Header>);
};

export default HeaderBar;